<template>
  <div class="mod-menu">
    <div>
      <el-button>全部订单</el-button>
      <el-button>已预约订单</el-button>
      <el-button>待核销订单</el-button>
    </div>
    <div class="mt30">
      <el-form :inline="true" :model="dataForm">
        <el-form-item label="订单编号">
          <el-input v-model="dataForm.userName" placeholder="订单编号" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户手机号码">
          <el-input v-model="dataForm.userName" placeholder="用户手机号码" clearable></el-input>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-input v-model="dataForm.userName" placeholder="订单类型" clearable></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-input v-model="dataForm.userName" placeholder="订单状态" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="dataList" row-key="Id" border style="width: 100%; ">
      <el-table-column prop="name" align="center" label="服务名称">
        <template slot-scope="scope">
          　　　　<el-popover placement="top-start" trigger="hover">
            <a :href="scope.row.img" target="_blank" title="查看最大化图片"><img :src="scope.row.img" style="width: 300px;height: 300px" /></a>
            <img slot="reference" :src="scope.row.img" @click="$openImg(scope.row.img)" style="width: 50px;height: 50px; cursor:pointer" />
          </el-popover>
          <div> {{scope.row.picName}}</div>
          　　
        </template>
      </el-table-column>
      <el-table-column prop="price" align="center" label="实收金额">
      </el-table-column>
      <el-table-column prop="name" align="center" label="客户信息">
        <template slot-scope="scope">
          <div>{{scope.row.consigneeName}}</div>
          <div>{{scope.row.consigneePhone}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="auditStatus" align="center" :formatter="statusFormatter" label="订单类型" width="100px">
      </el-table-column>
      <el-table-column prop="name" align="center" label="支付方式">
        <template slot-scope="scope">
          <div>支付方式 ：{{scope.row.payment==0?'微信支付':'银行卡'}}</div>
          <div>支付时间 ：{{scope.row.paytiem}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="shop" align="center" label="所属店铺">
      </el-table-column>
      <el-table-column prop="standUpDown" align="center" :formatter="standUpDown" label="订单状态" width="100px">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作" width="100px">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.menuId)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗, 新增 / 修改 -->
    <!-- <view-or-update v-if="addOrUpdateVisible" ref="viewOrUpdate"></view-or-update> -->
  </div>
</template>

<script>
// import ViewOrUpdate from './view-or-update'
export default {
  data () {
    return {
      dataForm: {},
      dataList: [
        {
          name: '店铺名称',
          img: '../../../../../static/img/banenr.png',
          picName: '商品名称商品名称商品名称商品名称',
          shop: '船长的杂货铺',
          price: '100.00',
          sort: 0,
          auditStatus: 0,
          standUpDown: 0,
          payment: 0,
          consigneeName: '唐明',
          consigneePhone: '13720184161',
          paytiem: '2020/10/1 12:12:12',
          orderNumber: 'LD83941804384239',
          trasactionID: 'JY3810230182310283'
        }, {
          name: '店铺名称',
          shop: '船长的杂货铺',
          img: '../../../../../static/img/banenr.png',
          picName: '商品名称商品名称商品名称商品名称',
          price: '100.00',
          sort: 0,
          auditStatus: 0,
          standUpDown: 1,
          payment: 1,
          consigneeName: '唐明',
          consigneePhone: '13720184161',
          paytiem: '2020/10/1 12:12:12',
          orderNumber: 'LD83941804384239',
          trasactionID: 'JY3810230182310283'
        }],
      dataListLoading: false,
      addOrUpdateVisible: false
    }
  },
  components: {
    // ViewOrUpdate
  },
  methods: {
    statusFormatter (row, column) {
      let status = row.auditStatus
      if (status === 0) {
        return '拼团订单'
      } else {
        return '秒杀订单'
      }
    },
    standUpDown (row, column) {
      let status = row.standUpDown
      if (status === 0) {
        return '待预约'
      } else {
        return '已预约'
      }
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.viewOrUpdate.init(id)
      })
    }
  }
}
</script>

<style lang="scss">
.mt30 {
  margin-top: 30px;
}
</style>
